<div class="modal-body">
  <div class="position-sticky w-100 top-0 d-flex flex-row z-3">
    <button type="button" class="btn-close ms-auto" aria-label="Close" (click)="modal.dismiss('Close click')"></button>
  </div>
  @let installed = installedInfo$ | async;
  <div class="d-flex flex-wrap flex-sm-row">
    <img class="app-details-icon" [ngSrc]="item.detailIconUri ?? item.iconUri" width="160" height="160" alt="App icon"/>
    <div class="flex-fill my-2 ms-3 d-flex flex-column">
      <h1>{{ item.title }}</h1>
      <label class="mt-1">
        Version {{ item.manifest?.version }}
        @if (installed) {
          (Installed: {{ installed?.version }})
        }
      </label>
      <label class="mt-1 fw-bold" *ngIf="item.manifest?.rootRequired" [ngSwitch]="item.manifest?.rootRequired">
        <ng-container *ngSwitchCase="true">Root required</ng-container>
        <ng-container *ngSwitchCase="'optional'">Root is optional</ng-container>
      </label>
    </div>
    <div class="d-flex flex-column justify-content-center ms-auto">
      <ng-container>
        <div class="btn-group text-nowrap ms-2" role="group" aria-label="Actions">
          @switch (installed && manifest.hasUpdate(installed.version)) {
            @case (false) {
              <button class="btn btn-primary" (click)="parent?.launchApp(item.id)" aria-label="Launch">
                <i class="bi bi-play-fill me-2"></i>Launch
              </button>
            }
            @case (true) {
              <button class="btn btn-primary" (click)="installPackage(item)" aria-label="Update">
                <i class="bi bi-download me-2"></i>Update
              </button>
            }
            @default {
              <button class="btn btn-primary" (click)="installPackage(item)" aria-label="Install">
                <i class="bi bi-download me-2"></i>Install
              </button>
            }
          }
          <div class="btn-group" ngbDropdown container="body" display="dynamic" role="group"
               aria-label="More options">
            <button class="btn btn-primary" ngbDropdownToggle>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" ngbDropdownMenu>
              <li ngbDropdownItem (click)="installPackage(item, 'beta')" *ngIf="item.manifestBeta">
                <i class="bi bi-download me-3"></i>Install Beta
              </li>
              <a ngbDropdownItem *ngIf="manifest?.sourceUrl as url" [href]="url" appExternalLink>
                <i class="bi bi-globe2 me-3"></i>Website
              </a>
              <ng-container *ngIf="installed">
                <li class="divider dropdown-divider"></li>
                <li ngbDropdownItem class="text-danger" (click)="removePackage(installed)">
                  <i class="bi bi-trash me-3"></i>Uninstall
                </li>
              </ng-container>
            </ul>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
  <hr>
  <div class="alert alert-warning" role="alert" *ngIf="(incompatible$ | async) as reasons">
    <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ item.title }} is marked incompatible with your device.
    <hr>
    <ul class="mb-0">
      <li *ngFor="let reason of reasons" [ngSwitch]="reason">
        <ng-container *ngSwitchCase="'root'">This app requires root but your device is not rooted.</ng-container>
        <ng-container *ngSwitchCase="'soc'">This app is not compatible with your device's SoC.</ng-container>
        <ng-container *ngSwitchCase="'release'">This app is not compatible with your webOS version.</ng-container>
      </li>
    </ul>
  </div>
  <div class="full-description" [innerHtml]="fullDescriptionHtml$ | async" #fullDescription></div>
  <hr>
  <ul class="list-group list-group-flush">
    <a [href]="url" appExternalLink class="list-group-item list-group-item-action" *ngIf="manifest?.sourceUrl as url">
      <h5>Project page</h5>
      <label class="mb">{{ url }}</label>
    </a>
  </ul>
</div>
